<template>
  <div>
    <h1 align="center">多对一和模块一样</h1>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" align="center" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="订单时间" width="180" align="center">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.orderTime }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="总结" width="180" align="center">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.total }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="用户名" width="180" align="center">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.user.username }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="出生日期" width="180" align="center">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.user.birthday }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="用户Id" width="180" align="center">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.user.id }}</el-tag>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
// 引入axios
import axios from 'axios'
export default {
  name: 'A',
  data() {
    return {
      tableData: []
    }
  },
  // vuez中生命周期钩子函数
  created() {
    this.query01()
  },
  methods: {
    // 查询
    query01() {
      axios
        .get('http://127.0.0.1:9090/order/orderList')
        .then((res) => {
          this.tableData = res.data.data
          // console.log(res);
        })
        .catch((error) => {
          console.error('error page01 deprtment', error)
        })
    }
  }
}
</script>

<style>
</style>
